<template>
  <div>
    <div class="marsk" @click="hide" v-if="state">
      <div class="totast">
        <p class="title">{{curriculum.title}}</p>
        <p class="give-describe">赠礼将于90天后过期过期未领取的课程将不退回</p>
        <div class="num-content">
          <p>赠送数量</p>
          <section>
            <span @click.stop="del">-</span>
            <span>{{num}}</span>
            <span @click.stop="add">+</span>
          </section>
        </div>
        <div class="num-count">
          <p>合计</p>
          <div style="font-size:16px;color:#333">
           {{curriculum.preferential_money * this.num}}
          </div>
        </div>
        <div
          class="btns"
          @click="giveCourse"
        >
          <div>赠送礼物</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: ['curriculum'],
  data () {
    return {
      num: 1,
      state: false
    }
  },
  created () {
    console.log('接入值', this.curriculum)
  },
  methods: {
    hide () {
      this.state = !this.state
    },
    del () {
      if (this.num > 1) {
        this.num--
      }
    },
    add () {
      this.num++
    },
    giveCourse () {
      this.$emit('giveCourse', this.num)
    }
  }
}
</script>
<style lang="less" scoped>
.marsk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  .totast {
    width: 84%;
    height: 310px;
    background-color: #fff;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 30px 30px 20px 30px;
    .title {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      line-height: 18px;
      color: #1a1a1a;
      font-weight: 600;
      text-align: center;
    }
    .give-describe {
      width: 52%;
      text-align: center;
      margin: 20px auto 43px auto;
      font-size: 12px;
      color: #999999;
      line-height: 20px;
    }
    .num-content {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      p {
        flex: 1;
      }
      section {
        width: 113px;
        height: 30px;
        border-radius: 5px;
        border: solid 1px #cccccc;
        display: flex;
        span {
          display: inline-block;
          flex: 1;
          text-align: center;
          height: 100%;
          line-height: 30px;
          font-size: 14px;
        }
        span:nth-of-type(2) {
          background-color: #f0f0f0;
          color: #1a1a1a;
          font-size: 14px;
        }
      }
    }
    .num-count {
      display: flex;
      width: 100%;
      align-items: center;
      line-height: 60px;
      color: #999999;
      p {
        flex: 1;
      }
    }
    .btns {
      width: 100%;
      div {
        width: 100%;
        height: 40px;
        background-color: #DA4131;
        border-radius: 17px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 15px;
      }
    }
  }
}
</style>
